@import './variables.scss';
@import './mixins.scss';

.challenge-card {
  .bottom-card-container {
    padding: 0px 30px;
    .settings-section {
      padding: 50px;
      border: 1px solid;
      border-radius: 5px;
      min-height: 50px;
      color: rgb(101, 97, 97);
    }
  }
  .row {
    margin: 20px 0px 3% 0px;
  }
}

p {
  margin: 6px 0px 25px 0px;
}

.rangeslider {
  width: 50%;
  display: flex;
  margin-top: 15px 5px 0px 0px;
}

.btn-floating {
  margin-top: 4%;
  margin-right: 8%;
}

.plus-btn {
  margin-left: 8%;
}

.rangeslider {
  mat-chip {
    margin-top: 6%;
    background: #252833 !important;
  }
  .btn {
    margin-right: 0px;
  }
}

.row .col {
  padding: 0px;
}

input {
  border-bottom: none;
}

:host ::ng-deep .mat-tab-label .mat-tab-label-content {
  font-weight: $fw-light !important;
  font-size: $fs-16 !important;
}

.phase-card {
  width: 50vw;
}

.phase-button {
  margin-left: 25px;
}

.worker-title {
  margin-bottom: 2%;
}

.upload-container {
  text-align: center;
}

@media (max-width: 992px) {
  .settings-section {
    padding: 50px !important;
  }
}

@media (min-width: 992px) {
  .col-md-12 {
    width: auto;
  }
}

@media (max-width: 600px) {
  .settings-section {
    padding: 25px !important;
  }
  .rangeslider {
    justify-content: space-evenly;
  }
  .btn-floating {
    margin: 0%;
  }
}

.example-chip-list {
  width: 100%;
}

.error-message {
  color: $highlight;
}

.challenge-detail {
  padding: 8px;
}

.challenge-title {
  color: rgba(0, 0, 0, 0.87);
}
